<!-- 课程讨论 -->
<template>
	<view class="content">
		<view class="bg">
			<Header title='课堂讨论' :isShowRight="false" @back='back' arrowColor='#000' textColor='#000'></Header>
		</view>
		<view class="contents">
			<view class="video">
				<video src="" controls></video>
				<view class="title_icon" :class="[!flag?'border_bottom':'']">
					<view class="title">{{Data.title}}</view>
					<view class="iconBox">
						<view class="flex">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/eyes.png" class="img"></image>
							<text>{{Data.seeNumber}}</text>
						</view>
						<view class="flex">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/good.png" class="img"></image>
							<text>{{Data.goodNumber}}</text>
						</view>
						<view class="flex">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/collect.png" class="img"></image>
							<text>收藏</text>
						</view>
						<view class="flex" @click="share">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/share.png" class="img"></image>
							<text>分享</text>
						</view>
						<view class="flex" @click="introduce">
							<text :class="[flag?'color1':'']">简介</text>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/bottomDown.png" v-if='flag' class="img"></image>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/right1.png" v-else class="img"></image>
						</view>
					</view>
				</view>
				<view class="introduce" v-if='flag'>
					<view class="">{{Data.introduce}}</view>
					<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/topDown.png"></image>
				</view>
			</view>

			<!-- 课程讨论 -->
			<view class="titles">
				<view class="verial">课程讨论</view>
			</view>
			<view class="discussionBox" v-for='(item,index) in Data.list' :key='index'>
				<image :src="item.avatar"></image>
				<view class="right">
					<view class="names">
						<text>{{item.nickname}}</text>
						<view class="goodBox">
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/zan.png" v-if='!goods' @click='add'></image>
							<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/zan1.png" v-else @click='add'></image>
							<text>{{item.number}}</text>
						</view>
					</view>
					<view class="message">{{item.content}}</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<Bottom>
			<template #left>
				<view>课堂讨论</view>
			</template>
			<template #right>
				<view class="buy" @click='goToImprove'>
					<view class="text">随堂小测</view>
					<text>一课一测，帮你更快发现问题</text>
				</view>
			</template>
		</Bottom>

		<!-- 发表评论图标 -->
		<view class="comments">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/comments.png"></image>
			<view class="publish">发表评论</view>
		</view>
		<share-popup @cancel='cancel' :show="shareShow"></share-popup>
	</view>

</template>

<script>
	import Header from '@/components/c_header.vue'
	import Bottom from '../modules/bottomBtn.vue'
	import sharePopup from '@/components/share.vue'
	export default {
		components: {
			Header,
			Bottom,
			sharePopup
		},
		props: {},
		data() {
			return {
				//打开或关闭简介
				flag: false,
				goods: false,
				shareShow: false,
				Data: {
					title: '【已知】2岁少儿瑜伽专项培训体验班-2课时让孩子运动中成长',
					seeNumber: 1600,
					goodNumber: 1600,
					introduce: '课程内容简介文字介绍课程内，容简介文字介绍课程内容简介文字。课程内容简介文字介绍课程内容简介文字介绍课程内容简介文字介',
					list: [{
							avatar: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/checked.png',
							nickname: '尾巴后有一只鬼',
							number: 3000,
							content: ' 南村群童欺我老无力，忍能对面为盗贼。公然抱茅入竹去，唇焦口燥呼不得，归来倚杖自叹息'
						},
						{
							avatar: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/checked.png',
							nickname: '尾巴后有一只鬼',
							number: 3000,
							content: ' 南村群童欺我老无力，忍能对面为盗贼。公然抱茅入竹去，唇焦口燥呼不得，归来倚杖自叹息'
						},
						{
							avatar: 'https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/checked.png',
							nickname: '尾巴后有一只鬼',
							number: 3000,
							content: ' 南村群童欺我老无力，忍能对面为盗贼。公然抱茅入竹去，唇焦口燥呼不得，归来倚杖自叹息'
						}
					]
				}
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//分享
			share() {
				this.shareShow = true
			},
			//取消分享
			cancel() {
				this.shareShow = false
			},
			//简介
			introduce() {
				this.flag = !this.flag
			},
			add() {
				this.goods = !this.goods
			},
			//跳转随堂小测
			goToImprove() {
				uni.navigateTo({
					url: '../improve/improve'
				})
			}
		},
		mounted() {

		},
		onLoad() {

		},
		onShow() {

		},
		filters: {},
		computed: {},
		watch: {},
	}
</script>

<style scoped lang="scss">
	.comments {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		bottom: 160rpx;
		right: 18rpx;
		z-index: 999;

		&>image {
			width: 54rpx;
			height: 60rpx;
			margin-bottom: 4rpx;
		}

		.publish {
			// width: 96rpx;
			height: 36rpx;
			background: linear-gradient(-45deg, #44A3FF, #69C1FF);
			border-radius: 18rpx;
			line-height: 36rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			padding: 0 4rpx;
			color: #FFFFFF;
		}
	}

	.buy {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 44rpx;

		.text {
			padding-top: 24rpx;
		}

		&>text {
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			line-height: 40rpx;
			font-weight: 400;
		}
	}

	.verial {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #303030;
		padding-left: 24rpx;
		position: relative;
	}

	.verial::before {
		content: '';
		position: absolute;
		width: 10rpx;
		height: 26rpx;
		background: #194FC9;
		border-radius: 4rpx;
		transform: translateY(-50%);
		top: 50%;
		left: 0;
	}

	.titles {
		background: #fff;
		padding: 38rpx 0 30rpx 32rpx;
	}

	.contents {
		position: absolute;
		top: 144rpx;
		right: 0;
		left: 0;
		bottom: 0;
		overflow: hidden;
		overflow-y: visible;
		background: #F8F8F8;
		padding: 0 0 120rpx 0;
	}

	.content {
		background: #F8F8F8;

		.bg {
			background: #fff;
			padding: 76rpx 0 38rpx 32rpx;
		}

		.discussionBox {
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 28rpx 40rpx 40rpx 30rpx;
			margin-bottom: 10rpx;

			&>image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.right {
				width: 85%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;

				.names {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>text {
						font-weight: 500;
						color: #373737;
					}

					.goodBox {
						display: flex;
						align-items: center;
						margin-right: 20rpx;

						&>image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}

						&>text {
							color: #818181;
						}
					}
				}

				.message {
					color: #373737;
					line-height: 40rpx;
					margin-top: 30rpx;
				}
			}
		}

		.video {
			width: 100%;
			background: #fff;

			.border_bottom {
				border-bottom: 2rpx solid #DFDFDF;
			}

			.title_icon {


				.title {
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #111111;
					line-height: 52rpx;
					text-indent: .5em;
					width: 90.5%;
					margin: 0 auto;
					padding: 30rpx 0;
				}

				.iconBox {
					display: flex;
					justify-content: space-around;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					color: #818181;
					line-height: 30rpx;
					padding: 0 0 30rpx 0;

					.flex {
						display: flex;
						align-items: center;

						.img {
							width: 28rpx;
							height: 28rpx;
							margin: 0 12rpx;
						}

						.color1 {
							color: #194FC9;
						}


					}
				}
			}

			&>video {
				width: 100%;
				height: 422rpx;
			}

			.introduce {
				width: 92%;
				margin: 0 auto;
				color: #939393;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding: 34rpx 44rpx 38rpx 30rpx;
				background: #fff;
				border-radius: 20rpx;
				line-height: 44rpx;
				position: relative;

				&>image {
					width: 28rpx;
					height: 14rpx;
					position: absolute;
					top: -14rpx;
					right: 54rpx;
				}
			}
		}



	}
</style>
